<template>
  <div class="position-box">
    <div class="banner-position">
      <el-row :gutter="50">
        <el-col :span="40">
          <div class="banner-position-title">首页轮播图</div>
          <div class="banner-position-img">
            <div :class="['imgbox',{'imgbox-v':!bannerList.defaultImg}]">
              <img :src="this.bannerList.defaultImg" @click="showimg(bannerList.defaultImg)" alt>
            </div>
            <div class="banner-position-mask hide">
              <div class="position-mask-box">
                <div class="position-mask-title">首页轮播图</div>
                <div class="position-mask-tip">
                  <div>
                    广告位数量 :
                    <span>{{bannerList.count}}</span>
                  </div>
                  <div>
                    使用中数量 :
                    <span>{{bannerList.used}}</span>
                  </div>
                  <div>
                    空闲数量 :
                    <span>{{bannerList.free}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <el-upload :class="['upload-demo',{'hidden':bannerList.btnShow}]" action="1" :before-upload="beforeUpload" :http-request="uploadBannerFile" :show-file-list="unshow">
            <el-button size="small" type="primary" v-if="!bannerList.defaultImg">添加默认广告图</el-button>
            <el-button size="small" type="primary" v-else>替换默认广告图</el-button>
          </el-upload>
        </el-col>
      </el-row>
      <el-row>
        <div class="el-upload__tip">上传图片的最佳尺寸：710像素*288像素，其他尺寸会影响页面效果，格式png，jpeg，jpg，gif。</div>
      </el-row>
    </div>
    <div class="banner-position">
      <el-row :gutter="50">
        <el-col :span="40">
          <div class="banner-position-title">TV视频广告</div>
          <div class="banner-position-img">
            <div :class="['imgbox',{'imgbox-v':!bannerListTV.defaultImg}]">
              <img v-if="!this.bannerListTV.defaultImg" alt>
              <video else :src="this.bannerListTV.defaultImg" class="video-avatar" controls="controls">您的浏览器不支持视频播放</video>
            </div>
            <div class="banner-position-mask hide">
              <div class="position-mask-box">
                <div class="position-mask-title">TV视频广告</div>
                <div class="position-mask-tip">
                  <div>
                    广告位数量 :
                    <span>{{bannerListTV.count}}</span>
                  </div>
                  <div>
                    使用中数量 :
                    <span>{{bannerListTV.used}}</span>
                  </div>
                  <div>
                    空闲数量 :
                    <span>{{bannerListTV.free}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-upload class="upload-demo" ref="upload" action="1" :before-upload="beforeAvatarTV" :http-request="uploadSectionFileTV" :file-list="fileList" :show-file-list='false'>
            <!-- <video v-if="this.bannerList.defaultTV !=''" :src="this.bannerList.defaultTV" class="video-avatar" controls="controls">您的浏览器不支持视频播放</video> -->
            <el-button size="small" type="primary" v-if="!bannerListTV.defaultImg">添加默认视频</el-button>
            <el-button size="small" type="primary" v-else>替换默认视频</el-button>
          </el-upload>
        </el-col>
      </el-row>
      <el-row>
        <div class="el-upload__tip">上传视频格式：ogg，webm，mp4 。</div>
      </el-row>
    </div>
  </div>
</template>
<script>
import {
  uploadFile,
  getFile,
  overview,
  defaultImg,
  uploadFileResultUrl
} from "@/api";
import { mapState } from "vuex";
export default {
  computed: mapState(["sub", "power", "merchantId"]),
  data() {
    return {
      fileList: [],
      bannerList: {
        used: 0,
        free: 0,
        count: 6,
        defaultImg: "",
        btnShow: false
      },
      bannerListTV: {
        used: 0,
        free: 0,
        count: 6,
        defaultImg: "",
        btnShow: false
      },
      unshow: false
    };
  },
  created() {
    overview({
      companyId: this.merchantId,
      appId: 1
    }).then(res => {
      this.bannerList = res.data[0];
    });
    overview({
      companyId: this.merchantId,
      appId: 2,
      position: 2
    }).then(res => {
      this.bannerListTV = res.data[2];
      this.$set(this.bannerListTV, "defaultImg", res.data[2].defaultImg);
    });
  },
  methods: {
    beforeAvatarTV(file) {
      console.log(file);
      const isJPG =
        file.type === "video/mp4" ||
        file.type === "video/ogg" ||
        file.type === "audio/ogg" ||
        file.type === "video/webm";
      if (!isJPG) {
        this.$message.error("上传视频格式错误!");
      }
      return isJPG;
    },
    uploadSectionFileTV(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("file", fileObj);
      data.append("projectName", fileObj.name);
      uploadFileResultUrl(data).then(res => {
        this.bannerListTV.defaultImg = res.data.url;
        this.replaceBannerTV();
      });
    },
    replaceBannerTV() {
      let data = {
        companyId: this.merchantId,
        position: 2,
        imgUrl: this.bannerListTV.defaultImg,
        appId: 2
      };
      defaultImg(data).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "替换默认视频成功"
          });
          overview({
            companyId: this.merchantId,
            appId: 2,
            position: 2
          }).then(res => {
            console.log(res);
            this.bannerListTV = res.data[2];
            this.$set(this.bannerListTV, "defaultImg", res.data[2].defaultImg);
            console.log(this.bannerListTV.defaultImg);
          });
        }
      });
    },
    beforeUpload(file) {
      const isJPG =
        file.type === "image/png" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/gif";

      if (!isJPG) {
        this.$message.error("上传图片格式错误!");
      }
      const isSize = new Promise(function(resolve, reject) {
        let width = 710;
        let height = 288;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {},
        () => {
          this.$message.error("上传的图片必须是710px x 288px");
          return Promise.reject();
        }
      );

      return isJPG && isSize;
    },
    uploadBannerFile(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("file", fileObj);
      data.append("projectName", fileObj.name);
      uploadFile(data).then(res => {
        this.bannerList.defaultImg = `${getFile}?id=${res.data.id}`;
        console.log(this.bannerList.defaultImg);
        this.replaceBanner();
      });
    },
    replaceBanner() {
      let data = {
        companyId: this.merchantId,
        position: 0,
        imgUrl: this.bannerList.defaultImg,
        appId: 1
      };
      defaultImg(data).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "替换默认banner图片成功"
          });
          overview({
            companyId: this.merchantId
          }).then(res => {
            this.bannerList = res.data[0];
          });
        }
      });
    }
  }
};
</script>
<style lang='less' scoped>
.position-box {
  display: flex;
  padding: 20px 40px;
}
.el-upload-list {
  display: none;
}

.banner-position {
  margin-right: 50px;

  .banner-position-img {
    width: 200px;
    height: 200px;
    border: 1px solid #dcdfe6;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    img {
      width: 100%;
      height: 100%;
    }
    .banner-position-img-item {
      height: 100px;
    }
    .banner-position-mask {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 200px;
      left: 0;
      background: #dcdfe6;
      opacity: 0.5;
      transition: all 0.8s linear;
      .position-mask-box {
        display: inline-box;
        text-align: center;
        margin-top: 50px;
        .position-mask-tip {
          text-align: right;
          line-height: 20px;
          div {
            margin: 5px 47px;
          }
        }
      }
    }
  }
  .banner-position-img:hover {
    .banner-position-mask {
      top: 0;
    }
  }
}
.banner-position-title {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.imgbox-v {
  width: 200px;
  height: 200px;
}
.imgbox img {
  display: block;
  width: auto;
  height: 200px;
}
.upload-demo {
  text-align: center;
}
.hidden {
  display: none;
}
.el-col {
  text-align: center;
}
.el-upload__tip {
  color: #a3a6ab;
  width: 350px;
}
.video-avatar {
  width: 200px;
  height: 150px;
}
</style>
